<template>
  <div class="Header">
    <div class="nav">
      <div class="logo"></div>
      <ul class="nav-left">
        <li class="nav-li">
          <router-link to="/" > 首页 </router-link>
        </li>
        <li class="nav-li">
          <router-link to="/JobList"> 职位 </router-link>
        </li>
        <li class="nav-li">
          <router-link to="/#2"> 校园 </router-link>
        </li>
        <li class="nav-li">
          <router-link to="/#3"> 海归 </router-link>
        </li>
        <li class="nav-li">
          <router-link to="/#4"> 公司 </router-link>
        </li>
        <li class="nav-li">
          <router-link to="/#5"> APP </router-link>
        </li>
        <li class="nav-li">
          <router-link to="/Journalism"> 资讯 </router-link>
        </li>
        <li class="nav-li">
          <router-link to="/#7"> 发现 </router-link>
        </li>
      </ul>
      <!-- 顶部导航状态-未登录 -->
      <ul class="nav-right" v-if="loginState === 0">
        <li class="nav-li" @click="userHandle">
          <a> 我要找工作 </a>
        </li>
        <li class="nav-li" @click="companyHandle">
          <a> 我要招聘 </a>
        </li>
        <li class="nav-li">
          <router-link to="/register"> <span>注册</span> </router-link>
        </li>
        <li class="nav-li" style="margin-left:-30px">
          <router-link to="/login"> <span>登录</span> </router-link>
        </li>
      </ul>
      <!-- 顶部导航状态-应聘者登录 -->
      <ul class="nav-right" v-if="loginState === 1">
        <li class="nav-li" @click="lookResume">
          <a> 查看简历 </a>
        </li>
        <li class="nav-li" @click="uploadResume">
          <a> 上传简历 </a>
        </li>
        <li class="nav-li" @click="getHidden">
          <a>{{ userData.uname }}</a>
          <div class="nav-li-userPic">
            <img src="../../assets/image/xxx.png" alt="" />
          </div>
        </li>
      </ul>
      <!-- 顶部导航状态-企业登录 -->
      <ul class="nav-right" v-if="loginState === 5">
        <li class="nav-li" @click="resumeHandle">
          <a> 简历管理 </a>
        </li>
        <li class="nav-li" @click="postJobInfoHandle">
          <a> 招聘管理 </a>
        </li>
        <li class="nav-li" @click="getHidden">
          <a>{{ companyData.cname }}</a>
          <div class="nav-li-userPic">
            <img src="../../assets/image/xxx.png" alt="" />
          </div>
        </li>
      </ul>
      <!-- 顶部导航状态-管理员账户 -->
      <ul class="nav-right" v-if="loginState === 10">
        <li class="nav-li" @click="accountManagement">
          <a> 用户管理 </a>
        </li>
        <li class="nav-li" @click="journalismManagement">
          <a> 新闻管理 </a>
        </li>
        <li class="nav-li" @click="getHidden">
          <a>{{ userData.uname }}</a>
          <div class="nav-li-userPic">
            <img src="../../assets/image/xxx.png" alt="" />
          </div>
        </li>
      </ul>
    </div>
    <div class="userFunction" v-if="isHidden">
      <p class="updataPassword" @click="updataPassword">修改密码</p>
      <p @click="logOut">退出登录</p>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      loginState: 0,
      userData: {},
      companyData: {},
      isHidden: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 未登录
    // 顶部导航-我要找工作
    userHandle() {
      this.$router.push({
        path: '/register',
        query: {
          activeName: 'user',
        },
      })
    },
    // 顶部导航-我要招聘
    companyHandle() {
      this.$router.push({
        path: '/register',
        query: {
          activeName: 'company',
        },
      })
    },
    // 企业登录
    // 企业简历管理
    resumeHandle() {
      this.$router.push({
        path: '/resumeManagement',
        query: {},
      })
    },
    // 企业发布招聘信息
    postJobInfoHandle() {
      this.$router.push({
        path: '/postJobInfo',
        query: {},
      })
    },
    // 应聘者登录
    // 查看简历
    lookResume() {
      this.$router.push({
        path: '/lookResume',
        query: {},
      })
    },
    // 上传简历
    uploadResume() {
      this.$router.push({
        path: '/uploadResume',
        query: {},
      })
    },
    loginStateFun() {
      // if (JSON.parse(sessionStorage.getItem('userMessage'))) {
      //   this.userData = JSON.parse(sessionStorage.getItem('userMessage'))
      //   this.loginState = true
      // } else {
      //   this.loginState = false
      // }
      if (JSON.parse(sessionStorage.getItem('userMessage'))) {
        this.userData = JSON.parse(sessionStorage.getItem('userMessage'))
        
        if (this.userData.ulevel === 10) { // 管理员登录
          this.loginState = 10
        }
        
        if (this.userData.ulevel === 1) { // 应聘者登录
          this.loginState = 1
        }
      } else if(JSON.parse(sessionStorage.getItem('companyMessage'))){
        this.companyData = JSON.parse(sessionStorage.getItem('companyMessage'))
        if (this.companyData.clevel === 5) { // 企业登录
          this.loginState = 5
        }
      } 
      else { // 未登录
        this.loginState = 0
      }
    },
    // 管理员用户管理
    accountManagement() {
      let routeData = this.$router.resolve({
        path:'/accountManagement'
      })
      window.open(routeData.href, '_blank');
    },
    // 管理员新闻管理
    journalismManagement() {
      let routeData = this.$router.resolve({
        path:'/journalismManagement'
      })
      window.open(routeData.href, '_blank');
    },
    // 点击显示隐藏个人中心
    getHidden() {
      this.isHidden = !this.isHidden
    },
    // 点击修改密码
    updataPassword() {
      this.$router.push({
        path: '/updataPassword',
        query: {}
      })
    },
    // 点击退出登录
    logOut() {
      sessionStorage.clear('userMessage')
      sessionStorage.clear('companyMessage')
      this.$router.push({
        path: '/login',
        query: {}
      })
    }
  },
  created() {
    this.loginStateFun()
  },
  mounted() {},
}
</script>
<style scoped>
.Header {
  width: 100%;
  height: 60px;
  background-color: #202329;
}
.nav {
  width: 1400px;
  height: 60px;
  margin: 0 auto;
}
.nav .logo {
  width: 200px;
  height: 60px;
  background-color: #202329;
  float: left;
}

.router-link-exact-active{
  /* color: #00d7c6; */
  border-bottom: 4px solid #fff;
}


.nav-left li a{
  width: 35px;
  height: 56px;
  text-align: center;
  line-height: 60px;
  font-size: 16px;
  color: #ffffff;
  display: block;
  padding: 0 15px;
  float: left;
}
.nav-right li a{
  width: 90px;
  height: 56px;
  text-align: center;
  line-height: 60px;
  font-size: 16px;
  color: #ffffff;
  display: block;
  padding: 0 15px;
  float: left;
}
.nav ul li a:hover {
  transition: all 0.5s;
  color: #00d7c6;
  cursor: pointer;
}
.nav-li a span {
  padding: 5px 10px;
  border: 1px solid #00d7c6;
  border-radius: 20px;
}
.nav li{
  height: 60px;
  float: left;
}
.nav-left {
  width: 700px;
  height: 60px;
  float: left;
}
.nav-right {
  width: 500px;
  height: 60px;
  float: right;
}


.nav-li-userPic {
  width: 32px;
  height: 32px;
  float: left;
  margin-top: 12px;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
}
.nav-li-userPic img {
  width: 100%;
  height: 100%;
}


.userFunction{
  width: 130px;
  /* height: 60px; */
  background-color: #202329;
  /* padding: 10px 0; */
  position: absolute;
  right: 170px;
  top: 60px;
}
.userFunction p{
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.userFunction p:hover{
  background-color: #5dd5cb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>
